{extend name="common/dialog" /}
{block name="main"}
<div class="admin-main layui-anim layui-anim-upbit dialog-form-padding" style="margin-top: 10px;">
    <form class="layui-form" action="" >
        <input type="hidden" name="model" value="{$model}" id="_model">
        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('Upload')}</label>
            <div class="layui-input-6" style="position: relative;">
              <input type="text" name="importfile" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
              <p id="_tips" style="color: #999;padding-left: 22px;"></p>
              <button class="layui-btn layui-btn-normal input-upload-btn" type="button" id="test1" title="{:lang('Upload')}"><i class="icon icon-upload3"></i></button>
            </div>
            <!-- <div class="layui-input-inline" style="width: 100px">
              <button class="layui-btn layui-btn-normal" type="button" id="test1"><i class="layui-icon">&#xe67c;</i> {:lang('Upload')}</button>
            </div> -->
      </div>
      
    </form>
    <form class="" action="{:U('import')}" id="form-import">
    <input type="hidden" name="importfile" id="_importfile">
    <input type="hidden" name="model" value="{$model}" id="_model">
    <div class="fieldset-content" id="_listBox3">
      <fieldset class="layui-elem-field site-demo-button" style="padding: 15px 10px;">
      <legend>{:lang('Field Mapping')}</legend>
      <table class="layui-table" width="95%">
        <thead>
          <tr>
            <th width="40%">{:lang('Source Field')}</th>
            <th width="40%">{:lang('Target Field')}</th>
            <th width="20%" style="text-align: center;">{:lang('Primary Key')}</th>
          </tr> 
        </thead>
        <tbody id="_fields">
          
        </tbody>
      </table>
      </form>
    </fieldset>
    </div>
</div>
{/block}
{block name="footer"}
<script type="text/javascript">
    layui.use('upload', function(){
      var upload = layui.upload;
      var loading = null;
      //执行实例
    upload.render({
        elem: '#test1' //绑定元素
        ,exts: 'xlsx|xls'
        ,accept:"file"
        ,url: "{:U('UpFiles/importFile')}" //上传接口
        ,data:{model:$("#_model").val()}
        ,done: function(res){
          $("#_fields").html('')
          //上传完毕回调
          layer.close(loading);
          $("#_tips").html("Type："+res.ext+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Size："+res.size);
          var option = '<option value=""></option>';
           $.each(res.fields,function(k,field){
                option += "<option value='"+k+"'>"+field+"</option>";
          })
          $.each(res.columns,function(i,name){

            $("#_fields").append('<tr><td>'+name+'</td><td><select name="fields['+i+']">'+option+'</select></td><td><input type="checkbox" name="pk['+i+']" class="default-input" value="1"/></td></tr>');

          })
          $(".layui-layer-iframe",window.parent.document).find(".layui-layer-btn0").addClass('btn0-dispay')
          $("#_importfile").val(res.url);
          $("input[name='importfile']").val(res.url);
          
        },
        before: function(obj){
          loading = layer.load(1, {shade: [0.1, '#fff']});
        }
        ,error: function(){
          //请求异常回调
        }
      });
    });
</script>
{/block}